import React,{forwardRef,useState,useEffect} from 'react'
import {Form,Input,Select} from 'antd'
const {Option}=Select
const UserForm=forwardRef((props,ref)=> {
    /**
     * 1.forwardRef :父定义的ref可以透传到子组件中
     *               使得父组件也可以用ref.current获取子组件的dom
     *                如果不使用，则父传子后又要子传父。我们省去了后面的步骤  
     * 
     * 3.修改超级管理员的区域选择：
     * onChange回调函数，判断当前选择，修改状态A
     * 状态A控制区域选择是否有效
     */
    const [isDisable, setisDisable] = useState(false)
    useEffect(() => {//控制更新表单中的区域显示,这里的useEffect用得很好
        setisDisable(props.isUpdateDisabled)
    }, [props.isUpdateDisabled])
    const {roleId,region} = JSON.parse(localStorage.getItem("token")); 
    const roleObj={
        "1":"superadmin",
        "2":"admin",
        "3":"editor"
    }
    const checkRegion=(item)=>{
        if(props.isUpdate){
            if(roleObj[roleId]==="superadmin") return false;
            else return true;
        }else{
            if(roleObj[roleId]==="superadmin") return false;
            else return item.value!==region //disable区域不同的item
        }
    }
    const checkRole=(item)=>{
        if(props.isUpdate){
            if(roleObj[roleId]==="superadmin") return false;
            else return true;
        }else{
            if(roleObj[roleId]==="superadmin") return false;
            else return roleObj[item.id]!=="editor" //区域管理只能添加区域编辑
        }
    }
    return (
        <Form
        ref={ref}
        name="basic"
        autoComplete="off"
        >
    <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入用户名' }]}
    >
        <Input />
    </Form.Item>
    <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入密码' }]}
    >
        <Input />
    </Form.Item>
    <Form.Item
        label="区域"
        name="region"
        rules={isDisable?[]:[{ required: true, message: 'Please input the title of collection!' }]}
    >
        <Select disabled={isDisable} style={{ width: '100%' }} >
            {
                props.regionList.map(item=>{
                    return(
                        <Option value={item.value}  disabled={checkRegion(item)} key={item.id} >{item.title} </Option>
                    )
                })
            }
        </Select>
    </Form.Item>
    <Form.Item
        label="角色"
        name="roleId"
        rules={[{ required: true, message: '请选择角色' }]}
    >
         <Select style={{ width: '100%' }}  onChange={(value)=>{
             if(value===1){
                setisDisable(true);
                //通过ref清空当前的值
                ref.current.setFieldsValue({
                    region:""
                })
             }else{
                setisDisable(false)
            }
         }}>
            {
                props.roleList.map(item=>{
                    return(
                        <Option value={item.id} key={item.id} disabled={checkRole(item)}>{item.roleName} </Option>
                    )
                })
            }
        </Select>
    </Form.Item>
    </Form>
    )
})
export default UserForm;